<template>
  <div class="sea_top flex JustifyContentSA">
    <p class="top_left textC" @click="model=true">社会组织相关数据汇总</p>
    <div class="Medium font_s19">
      <p>本月新成立</p>
      <p>
        <span class="font_s60 Acens" style="color: #F2D754;">8</span>
        <span>家</span>
      </p>
    </div>
    <div class="Medium font_s19">
      <p>本月变更</p>
      <p>
        <span class="font_s60 Acens" style="color: #F2D754;">39</span>
        <span>家</span>
      </p>
    </div>
    <div class="Medium font_s19">
      <p>本月注销</p>
      <p>
        <span class="font_s60 Acens" style="color: #F2D754;">3</span>
        <span>家</span>
      </p>
    </div>
    <p class="top_right textC">社会组织分析研判</p>
    <Modal v-if="model" @hidden="hidden">
      <img class="bj" src="../../assets/img/comprehensive/94.jpg" alt="">
    </Modal>
  </div>
</template>
<script>
import Modal from '@/components/Modal.vue'
export default {
  name: 'SeaTop',
  components: {
    Modal
  },
  data () {
    return {
      model: false
    }
  },
  methods: {
    hidden () {
      this.model = false
    }
  }
}
</script>
<style lang="scss" scoped>
.sea_top{
  width: 100%;
  position: absolute;
  top: 15%;
  color: aliceblue;
  .top_left,.top_right{
    width: 24.9375rem;
    height: 6.375rem;
    line-height: 5rem;
  }
  .top_left{
    background: url(../../assets/img/data/11.png) no-repeat;
    background-size: 100% 100%;
  }
  .top_right{
    background: url(../../assets/img/data/12.png) no-repeat;
    background-size: 100% 100%;
  }
  .bj{
    width: 90%;
    height: 90%;
    position: absolute;
    top:5%;
    left: 5%;
  }
}
</style>
